import React, { useState, useEffect } from 'react';

import './index.less';
import { TjFilter, TjHeader } from '@/tjComponents';
import TjTable from '@/pages/ETrade/components/TjTable';
import { Select, DatePicker, message, Tag } from 'antd';
import { useForm } from 'antd/es/form/Form';
import moment from 'moment';
import { HttpCode } from '#/utils/contacts.js';
import { queryDailyRollingTradeReportLog } from '../../services';
import { useTablePipeline, features } from 'ali-react-table';
import type { ArtColumn } from 'ali-react-table';

const columns = (dataSource: any): ArtColumn[] => [
  {
    name: '申报执行日期',
    align: 'center',
    code: 'reportDate',
    width: 90,
    features: { autoRowSpan: true },
  },
  {
    name: '日滚动交易序列',
    align: 'center',
    code: 'dateRange',
    features: { autoRowSpan: true },
  },
  {
    name: '交易单元',
    align: 'center',
    code: 'stationName',
    features: { autoRowSpan: true },
  },
  {
    name: '时段类型',
    code: 'timeOrder',
    align: 'center',
  },
  {
    name: '买方最低限价',
    code: 'buyLowPrice',
    align: 'center',
    width: 100,
    render: (value) => (value ? value : '-'),
  },
  {
    name: '卖方最高限价',
    code: 'sellUpPrice',
    align: 'center',
    width: 100,
    render: (value) => (value ? value : '-'),
  },
  {
    name: '交易方向',
    code: 'tradeType',
    align: 'center',
    width: 90,
    render: (value) => {
      return value === 1 ? '买入' : '卖出';
    },
  },
  {
    name: '日电量',
    code: 'declarationQuantity',
    align: 'center',
    width: 100,
    render: (value) => (value ? value : '-'),
  },
  {
    name: '交易电价',
    code: 'declarationPrice',
    align: 'center',
    width: 100,
    render: (value) => (value ? value : '-'),
  },
  {
    name: '申报状态',
    code: 'status',
    align: 'center',
    render: (value) => {
      if (value === '未申报') {
        return <Tag color="orange">{value}</Tag>;
      } else if (value === '申报失败' || value === '申报接口异常') {
        return <Tag color="red">{value}</Tag>;
      } else if (value === '申报中') {
        return <Tag color="gold">{value}</Tag>;
      } else {
        return <Tag color="green">{value}</Tag>;
      }
    },
  },
  {
    name: '操作人',
    code: 'operationBy',
    align: 'center',
    width: 100,
  },
];

const DeclarationOverview: React.FC<IDeclarationOverviewProps> = (props) => {
  const [dataSource, setDataSource] = useState<any[]>([]);
  const [loading, setLoading] = useState<boolean>(false);
  const [form] = useForm();

  const query = (params: any) => {
    const newParms = {
      ...params,
      date: moment(params.date).format('YYYY-MM-DD'),
    };
    setLoading(true);
    queryDailyRollingTradeReportLog(newParms)
      .then((res: any) => {
        if (res.statusCode === HttpCode.SUCCESS) {
          setDataSource(res.data || []);
        } else {
          message.error(res.message);
        }
      })
      .finally(() => {
        setLoading(false);
      });
  };

  const onSearch = (value: any) => {
    query(value);
  };

  useEffect(() => {
    if (props.filterValues) {
      const { stationId } = props.filterValues;
      const initParmas = { stationId, date: moment() };
      form.setFieldsValue(initParmas);
      query(initParmas);
    }
  }, [props.filterValues]);

  const pipeline = useTablePipeline()
    .input({ columns: columns(dataSource), dataSource })
    .primaryKey('tableId')
    .use(features.autoRowSpan());

  return (
    <div className="declaration-overview">
      <TjFilter
        form={form}
        useResetBtn={false}
        loading={loading}
        onSearch={onSearch}
        items={[
          {
            name: 'stationId',
            render: (
              <Select style={{ width: 180 }}>
                {props.stationsOptions.map((item) => (
                  <Select.Option key={item.stationId} value={item.stationId}>
                    {item.stationName}
                  </Select.Option>
                ))}
              </Select>
            ),
          },
          {
            name: 'date',
            render: <DatePicker />,
          },
        ]}
      />
      <div className="table-box">
        <TjTable useVirtual="auto" {...pipeline.getProps()} isLoading={loading} />
      </div>
    </div>
  );
};

interface IDeclarationOverviewProps {
  stationsOptions: any[];
  filterValues: any;
}

export default DeclarationOverview;
